<template>
  <el-main>
    <el-card
      shadow="never"
      header="分类筛选器"
    >
      <sc-select-filter
        :data="data"
        :selected-values="selectedValues"
        :label-width="80"
        @on-change="change"
      />
    </el-card>
    <el-card
      shadow="never"
      header="返回值"
      style="margin-top: 15px;"
    >
      <pre>{{ filterData }}</pre>
    </el-card>
  </el-main>
</template>

<script>
import scSelectFilter from '@/components/scSelectFilter'

export default {
  name: 'SelectFilter',
  components: {
    scSelectFilter
  },
  data() {
    return {
      data: [
        {
          title: "状态(单)",
          key: "state",
          options: [
            {
              label: "全部",
              value: ""
            },
            {
              label: "待审核",
              value: "1",
              icon: "el-icon-flag"
            },
            {
              label: "已退回",
              value: "2",
              icon: "el-icon-bottom-left"
            },
            {
              label: "已关闭",
              value: "3",
              icon: "el-icon-circle-close"
            },
            {
              label: "已完成",
              value: "4",
              icon: "el-icon-checked"
            }
          ]
        },
        {
          title: "类型(多)",
          key: "type",
          multiple: true,
          options: [
            {
              label: "全部",
              value: ""
            },
            {
              label: "请假申请",
              value: "1"
            },
            {
              label: "加班申请",
              value: "2"
            }
          ]
        }
      ],
      selectedValues: {
        state: [""],
        type: [""]
      },
      filterData: {}
    }
  },
  mounted() {

  },
  methods: {
    change(selected){
      this.filterData = selected
    }
  }
}
</script>

<style>
</style>
